const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {

   // 指定入口文件
   entry: "./src/index.ts",

   // 指定打包文件所在目录
   output: {
      // 指定打包文件的目录
      path: path.resolve(__dirname, 'dist'),
      // 打包后文件的文件名
      filename: "bundle.js",

      environment: {
         // 告诉webpack不使用箭头
         arrowFunction: false
      }
   },
   devServer: {
      open: true // 自动打开浏览器
   },
   // 指定webpack打包时要使用模块
   module: {
      // 指定要加载的规则
      rules: [
         {
            // test指定的是规则生效的文件
            test: /\.ts$/,
            // 要使用的loader
            use: [
               // 配置babel(然后es6根据浏览器转)
               {
                  // 指定加载器
                  loader: "babel-loader",
                  // 设置babel
                  options: {
                     // 设置预定义的环境
                     presets: [
                        [
                           // 指定环境的插件
                           "@babel/preset-env",
                           // 配置信息
                           {
                              // 要兼容的目标浏览器
                              targets: {
                                 "chrome": "58",
                                 "ie": "11"
                              },
                              // 指定corejs的版本
                              "corejs": "3",
                              // 使用corejs的方式 "usage" 表示按需加载
                              "useBuiltIns": "usage"
                           }
                        ]
                     ]
                  }
               },
               // 从后往前进行 ，所以ts-loader先ts转es6
               'ts-loader'
            ],
            // 要排除的文件
            exclude: /node-modules/
         }
      ]
   },
   // 配置Webpack插件
   plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
         // title: "这是一个自定义的title",
         template: "./src/index.html" //提供模板
      })
   ],
   // 用来设置引用模块(不然import export会使编译出错)
   resolve: {
      extensions: ['.ts', '.js']
   }
}